<template>
  <div class="app-container">
    <my-data-table  status="INIT" @selection-change="handleSelectionChange" ref="dataTable">
      <el-table-column align="center" label="操作" slot="operator">
        <template slot-scope="scope">
          <el-popconfirm title="确定撤回合同吗？" @confirm="handleCancel(scope.row)">
            <el-button type="text" slot="reference" style="margin-right: 8px">撤回</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </my-data-table>
  </div>
</template>

<script>
import {  cancelFlow } from '@common/api/worker';
import { createSignUrl } from '@common/api/contract';
import { getColumns } from '@common/utils/worker';
import MyDataTable from './components/table.vue';

import { Message } from 'element-ui';

export default {
  components: { MyDataTable },
  data() {
    return {
      selection: [],
    };
  },
  computed: {
    columns() {
      return getColumns([
        'name',
        'mobile',
        'gender',
        'age',
        'idcardNo',
        'education',
        'birthPlace',
        'address',
        'createdOn',
      ]);
    },
  },

  methods: {
    async handleCancel(data) {
      const response = await cancelFlow({ workerId: data.id });
      if (response?.code === 20000) {
        this.$refs.dataTable.onReset();
        return this.$message({ message: '撤回合同成功', type: 'success' });
      }
      return this.$message.error('撤回合同失败');
    },
    // 批量提醒
    handleBatch() {
      if (!this.selection.length) {
        return Message({
          type: 'warning',
          message: '请先选择人员',
          duration: 5 * 1000,
        });
      }
      this.batchPop = true;
    },

    handleSelectionChange(val) {
      this.selection = val;
    },
    async handleRemind(Id) {
      const worker = this.$refs.dataTable.list.find(v => v.id === Id);
      const res = await createSignUrl(worker.FlowIds?.[0]);
      if (res?.data?.SignUrlInfos?.length) {
        this.$alert(res?.data?.SignUrlInfos[0].SignUrl, '短信链接', {
          confirmButtonText: '确定',
        });
      }
    },
  },
};
</script>
<style scoped>
.top-filter {
  margin-bottom: 20px;
}
</style>
